<template>
  <div class="inspectionTask">
    <template v-if="type == 1">
      <div class="top">
        <p class="top_title">单据信息</p>
        <div class="top_item">
          <span class="label">计划名称</span>
          <span class="val">{{ info.name || '-' || '-' }}</span>
        </div>
        <div class="top_item">
          <span class="label">检查设备</span>
          <p class="val ellipsis">
            {{
              info.deviceGroupVOList
                ? info.deviceGroupVOList.map((v) => v.name).join(',')
                : '-'
            }}
          </p>
        </div>
        <div class="top_item">
          <span class="label">安装位置</span>
          <span class="val">{{ info.installLocationName || '-' }}</span>
        </div>
        <div class="top_item">
          <span class="label">执行人员</span>
          <span class="val">{{ info.executorName || '-' }}</span>
        </div>
        <div class="top_item">
          <span class="label">本次应检时间</span>
          <span class="val">
            {{ info.createTime || '-' }}至{{ info.updateTime || '-' }}</span
          >
        </div>
      </div>
      <div class="collapse">
        <h3 class="title">
          <span class="bt">*</span>
          巡检项目
        </h3>
        <van-collapse v-model="activeNames">
          <!-- data.spotInspectionStandardsDeviceTypeVOList -->
          <van-collapse-item
            :title="v.item"
            name="1"
            v-for="v in spotInspectionItemsVOList"
            :key="v.id"
          >
            <div class="collapse_item">
              <div class="item" v-for="item in arr" :key="item.id">
                <p class="label">{{ item.label }}</p>
                <p class="content">{{ v[item.key] }}</p>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </template>

    <AddForm v-if="type == 2"></AddForm>
    <AddTicket v-if="type == 3"></AddTicket>
    <van-overlay :show="showOverlay" class-name="loading_overlay">
      <van-loading class="loading" type="spinner" color="#1989fa" />
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
import { getSpotInspectionPlanInfo } from '@/api/potInspectionPlan.js';
const type = ref(route.params.type);
import AddForm from './addForm.vue';
import AddTicket from './addTicket.vue';
import { closeDialog } from 'vant';
const activeNames = ref(['1']);
const showOverlay = ref(false);
const info = ref({});
const spotInspectionItemsVOList = ref([]);
watchEffect(() => {
  type.value = route.params.type|| 1;
});
const arr = [
  {
    label: '检查项目',
    key: 'item',
  },
  {
    label: '检查方法及基准',
    key: 'inspectionStandards',
  },
  {
    label: '上限',
    key: 'upperLimit',
  },
  {
    label: '下限',
    key: 'lowerLimit',
  },
  {
    label: '结果',
    key: 'remark',
  },
];
onMounted(() => {
  getDetail(route.params.id);
});
function getDetail(deviceId) {
  showOverlay.value = true;
  getSpotInspectionPlanInfo(deviceId)
    .then((res) => {
      if (res.code == 200) {
        info.value = res.data;
        const arr = [];
        res.data.spotInspectionStandardsDeviceTypeVOList.forEach((v) => {
          v.spotInspectionItemsVOList.forEach((item) => {
            arr.push(item);
          });
        });
        spotInspectionItemsVOList.value = arr;
      }
    })
    .catch((err) => {
      console.log('err', err);
    })
    .finally(() => {
      showOverlay.value = false;
    });
}
</script>

<style lang="scss" scoped>
.inspectionTask {
  padding: 24px 0;
  height: calc(100vh - 100px);
  overflow-y: auto;
  .top {
    background: url('@/assets/images/bg1.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 283px;
    padding: 12px 18px;
    .top_title {
      height: 24px;
      font-weight: bold;
      font-size: 15px;
      color: #333333;
    }
    .top_item {
      display: flex;
      justify-content: space-between;
      text-align: left;
      width: 100%;
      height: 44px;
      line-height: 44px;
      border-bottom: 1px solid #fafafa;
    }
    .val {
      text-align: left;
      width: 60%;
    }
  }
  .van-collapse-item__content {
    padding: 0;
  }
  .collapse_item {
    background: url('@/assets/images/bg2.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
  }
  .collapse {
    margin-top: 24px;
  }
  .title {
    height: 24px;
    font-weight: bold;
    font-size: 15px;
    color: #333333;
  }

  .item {
    padding: 10px;
    .label {
      height: 24px;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      margin: 4px 0;
    }
    .content {
      padding: 0 10px;
      box-sizing: border-box;
      width: 100%;
      height: 45px;
      line-height: 45px;
      background: #f1f1f1;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #cccccc;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
    }
  }
}
</style>
